<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ElasticSearch - AppInfo</title>
    <link rel="stylesheet" href="/css/zui.min.css">
</head>
<body>

<div class="container">
    <form class="form-horizontal">
        <legend>AppInfo</legend>
        <div class="form-group">
            <label for="indices" class="col-md-1">索引</label>
            <div class="col-md-4 col-sm-10">
                <input type="text" class="form-control" id="indices" placeholder="logstash-front-info_2018.07.16,....">
            </div>
            <label for="contents" class="col-md-1">过滤</label>
            <div class="col-md-4 col-sm-10">
                <input type="text" class="form-control" id="contents" placeholder="body@*collectAppInfo*;...@...">
            </div>
            <div class="col-md-1">
                <button id="search-btn" type="button" class="btn btn-primary"
                        data-loading-text="<i class='icon icon-spin icon-refresh'></i>">
                    <i class="icon icon-search"></i> 查询
                </button>
            </div>
            <div class="col-md-1">
                <button id="migration-btn" type="button" class="btn btn-primary" title="迁移到数据库"
                        data-loading-text="<i class='icon icon-spin icon-spinner'></i>">
                    <i class="icon icon-exchange"></i> <i class="icon icon-database"></i>
                </button>
            </div>
        </div>
    </form>
    <div id="p-div" class="hide">
        <div class="progress progress-striped active">
            <div id="progress-div" class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0"
                 aria-valuemin="0" aria-valuemax="100" style="width: 0%">
                <span class="sr-only"></span>
            </div>
        </div>
        <strong><span id="progress-num" class="progressbar-value">0</span>%</strong>
    </div>
    <div id="info-items">
        <div class="list list-condensed">
            <header>
                <h3>
                    <i class="icon icon-list-ul"></i>
                    <small> 历史记录 <span id="total-num">${appInfoPage.totalElements}</span> 条</small>
                </h3>
            </header>
            [#list appInfoPage.content as infos]
            <div class="items items-hover">
                <div class="item">
                    <div class="item-heading">
                        <h4><a href="###">${infos.method!infos.methodName}</a></h4>
                    </div>
                    <div class="item-content">
                        <div class="text text-ellipsis">
                            ${infos.body}
                        </div>
                    </div>
                    <div class="item-footer">
                        <i class="icon icon-tags"></i> ${infos.level}
                        &nbsp;
                        <span class="text-muted">${infos.datetime}</span>
                        <div class="pull-right">
                            <a href="#collapse-${infos.id}" data-toggle="collapse">
                                <i class="icon icon-chrome text-primary"></i>
                            </a>
                        </div>
                    </div>
                    <div class="collapse" id="collapse-${infos.id}">
                        <div class="with-padding">
                            <pre class="pre-scrollable">
                                ${infos.body}
                            </pre>
                        </div>
                    </div>
                </div>
            </div>
            [/#list]
            <!--<footer>-->
            <!--<ul id="myPager" class="pager" data-ride="pager" data-page="${(appInfoPage.number+1)?c}" data-rec-per-page="${appInfoPage.size?c}" data-rec-total="${appInfoPage.totalElements?c}"></ul>-->
            <!--</footer>-->
        </div>
    </div>
    <div id="more-div" style="height: 50px;line-height: 50px;text-align: center;padding-top: 10px;">
        <a id="more-btn" href="###">
            <i class="icon icon-double-angle-down text-gray icon-2x"></i>
        </a>
    </div>
    <div style="text-align: center;margin-top: 40px;margin-bottom: 20px;">
        <a target="_blank" href='https://gitee.com/wangxiaonan/migration'><img src='https://gitee.com/wangxiaonan/migration/widgets/widget_3.svg?color=3884ff' alt='Fork me on Gitee'></img></a>
    </div>
</div>


<script src="/js/jquery1.8.1.js"></script>
<script src="/js/zui.min.js"></script>
<script type="text/javascript">
    $('#search-btn').on('click', function (e) {
        var indices = $('#indices').val().trim();
        var contents = $('#contents').val().trim();

        var $btn = $(this);
        $btn.button('loading');
        searchItem(queryData(globalSize, 0), function () {
            $btn.button('reset');
            $('#more-div').show();
        }, false);
    });

    var globalPage = ${appInfoPage.number + 1};
    var globalSize = 10;
    var queryData = function (size, page) {
        var indices = $('#indices').val().trim();
        var contents = $('#contents').val().trim();

        return {'indices': indices, 'contents': contents, 'size': size, 'page': page}
    }

    var searchItem = function (data, callback, isAppend) {
        $.ajax({
            url: '/app-info/items',
            type: 'GET',
            dataType: 'html',
            data: data,
            beforeSend: function () {
                console.log('start-search')
            },
            success: function (result) {
                if (isAppend) {
                    $('#info-items').append(result);
                    globalPage++;
                } else {
                    $('#info-items').html(result);
                    globalPage = 1;
                }
            },
            error: function () {

            },
            complete: function () {
                console.log('end-search')
                callback();
            }
        });
    }
    // 数据迁移
    $('#migration-btn').on('click', function (e) {
        var indices = $('#indices').val().trim();
        var contents = $('#contents').val().trim();
        var totalNum = $('#total-num').text();
        var $btn = $(this);

        var c = confirm("索引：" + indices + "\n过滤：" + contents + "\n共 " + totalNum + " 条数据\n是否继续？！");
        if (c == false) {
            return;
        }
        var intervalFlag;
        $.ajax({
            url: '/app-info/migration',
            type: 'GET',
            dataType: 'html',
            data: {'indices': indices, 'contents': contents},
            beforeSend: function () {
                $btn.button('loading');
                $('#p-div').show();
                intervalFlag = setInterval(progress, 2000);
                $('#more-div').hide();
                $('#info-items').hide();
            },
            success: function (result) {
                $('#info-items').html(result);
            },
            error: function () {
                console.log('error')
            },
            complete: function () {
                $btn.button('reset');
                clearInterval(intervalFlag);
                $('#p-div').hide();
                $('#info-items').show();
                $('#progress-div').css('width', '0%');
                $('#progress-num').text('0');
            }
        });
    });

    // 底部刷新
    $('#more-btn').on('click', function () {
        searchItem(queryData(globalSize, globalPage), function () {
        }, true);
    });

    // 进度条
    var progress = function () {
        var $progress = $('#progress-div');
        var $num = $('#progress-num');

        $.ajax({
            url: '/app-info/migration/progress',
            type: 'GET',
            dataType: 'json',
            // async: false,
            beforeSend: function () {

            },
            success: function (result) {
                $progress.css('width', result.data.percent + '%');
                $num.text(result.data.percent);
            },
            error: function () {
                console.log('progress error')
            },
            complete: function () {
                // console.log('complete progress request')
            }
        });
    }
</script>
</body>
</html>